<template>
  <div class="product-detail-page">
    <Navbar />
    <div class="product-detail-container" v-if="product">
      <div class="product-images">
        <img :src="product.imgUrl" alt="商品图片" class="main-img">
      </div>
      <div class="product-info">
        <h1 class="product-title">{{ product.title }}</h1>
        <div class="product-price">
          <span v-if="product.promoStatus === 2" class="promo-price">¥{{ product.promoPrice }}</span>
          <span v-else>¥{{ product.price }}</span>
          <span v-if="product.promoStatus === 1" class="promo-tag">即将开始秒杀</span>
          <span v-if="product.promoStatus === 2" class="promo-tag">正在秒杀</span>
        </div>
        <p class="product-description">{{ product.description }}</p>
        <p class="product-stock">库存: {{ product.stock }}</p>
        <p class="product-sales">销量: {{ product.sales || 0 }}</p>

        <div v-if="product.promoStatus === 1" class="promo-info">
          <p>秒杀开始时间: {{ product.promoStartDate }}</p>
        </div>

        <div class="buy-section">
          <div class="quantity-selector">
            <button @click="decreaseQuantity">-</button>
            <input type="number" v-model="quantity" min="1" :max="product.stock">
            <button @click="increaseQuantity">+</button>
          </div>
          <button @click="handleBuy" class="buy-btn">立即购买</button>
        </div>
      </div>
    </div>
    <div v-else class="loading">加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Navbar from '../components/Navbar.vue';
import { productAPI, orderAPI } from '../services/api';

const route = useRoute();
const product = ref(null);
const quantity = ref(1);

onMounted(async () => {
  try {
    const response = await productAPI.getDetail(route.params.id);
    product.value = response.data;
  } catch (error) {
    console.error('获取商品详情失败:', error);
    alert('获取商品详情失败: ' + (error.message || '未知错误'));
  }
});

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const increaseQuantity = () => {
  if (product.value && quantity.value < product.value.stock) {
    quantity.value++;
  }
};

const handleBuy = async () => {
  if (!product.value) return;

  try {
    await orderAPI.create(
        product.value.id,
        quantity.value,
        product.value.promoId || null
    );
    alert('购买成功！');
    // 可以跳转到订单列表或其他页面
  } catch (error) {
    alert('购买失败: ' + (error.message || '未知错误'));
  }
};
</script>

<style scoped>
.product-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  gap: 30px;
}

.product-images {
  flex: 1;
}

.main-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
}

.product-price {
  margin-bottom: 20px;
}

.promo-price {
  color: #e53935;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 10px;
}

.product-price span:not(.promo-price) {
  color: #666;
  font-size: 1.2rem;
}

.promo-tag {
  background-color: #e53935;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-left: 10px;
}

.product-description {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #666;
}

.product-stock, .product-sales {
  margin-bottom: 10px;
  color: #666;
}

.promo-info {
  margin: 20px 0;
  padding: 10px;
  background-color: #fff3e0;
  border-left: 4px solid #ff9800;
}

.buy-section {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background-color: white;
  cursor: pointer;
}

.quantity-selector input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}

.buy-btn {
  padding: 12px 30px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.buy-btn:hover {
  background-color: #f57c00;
}

.loading {
  text-align: center;
  padding: 50px;
  font-size: 1.2rem;
  color: #666;
}
</style>